<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>会员详情</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/datapicker/bootstrap-datetimepicker.min.css">
<style type="text/css">
.form-control{width:90%;}
</style>
</head>
<body>
<div class="container-fluid">
	<div class="panel-group" id="accordion">
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h5 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseOne" aria-expanded="false" class="collapsed">
                    	基础信息</a>
                </h5>
	        </div>
	        <div id="collapseOne" class="panel-collapse collapse in" aria-expanded="true">
	            <div class="panel-body">
	            	<form id="memberUpdateForm" method="post">
	            	<input name="id" class="memberId" type="hidden"/>
	            	<table style="width: 100%;border-collapse:separate; border-spacing:0px 8px;">
	            		<tr>
	            			<td>手机号</td>
	            			<td><input id="phone" name="phone" class="form-control"> </td>
	            			<td>姓名</td>
	            			<td><input id="name" name="name" class="form-control"> </td>
	            			<td>微信号</td>
	            			<td><input id="wechat" name="wechat" class="form-control"> </td>
	            		</tr>
	            		<tr>
	            			<td>性别</td>
	            			<td>
	            				<select id="gender" name="gender" class="form-control">
	            					<option value="n">未获取</option>
	            					<option value="m">男</option>
	            					<option value="f">女</option>
	            				</select> </td>
	            			<td>生日</td>
	            			<td><input id="birthday" name="birthday" readonly="readonly" class="form-control"> </td>
	            			<td>年龄</td>
	            			<td><input id="age" readonly="readonly" class="form-control"> </td>
	            		</tr>
	            		<tr>
	            			<td>邮箱</td>
	            			<td><input id="email" name="email" class="form-control"> </td>
	            			<td>QQ</td>
	            			<td><input id="QQ" name="qq" class="form-control"> </td>
	            			<td>省份</td>
	            			<td><select id="s_province" name="province" onchange="func_getCity(this.value)" class="form-control"><option value="">请选择</option></select> </td>
	            		</tr>
	            		<tr>
	            			<td>会员状态</td>
	            			<td>
	            				<select name="isFreezing" id="isFreezing" class="form-control">
	            					<option value="1">正常</option>
	            					<option value="2">冻结</option>
	            				</select></td>
	            			<td>城市</td>
	            			<td><select id="s_city" name="city" class="form-control"><option value="">请选择</option></select> </td>
	            			<td>微博</td>
	            			<td><input id="weibo" name="weibo" class="form-control"> </td>
	            		</tr>
	            		<tr>
	            			<td>会员等级</td>
	            			<td><input id="crmMemberLevel" class="form-control" readonly="readonly"> </td>
	            			<td>会员积分</td>
	            			<td><input id="crmScore" class="form-control" readonly="readonly"> </td>
	            			<td>会员储值</td>
	            			<td><input id="crmBalance" class="form-control" readonly="readonly"> </td>
	            		</tr>
	            		<tr>
	            			<td>所属门店</td>
	            			<td><input id="storeName" class="form-control" readonly="readonly"> </td>
	            			<td>所属销售</td>
	            			<td><input id="marketName" class="form-control" readonly="readonly"> </td>
	            			<td>类型</td>
	            			<td>
	            				<select id="isPotential" name="isPotential" class="form-control">
	            					<option value="1">会员</option>
	            					<option value="2">潜客</option>
	            				</select>
	            			</td>
	            		</tr>
	            		<tr>
	            			<td>备注</td>
	            			<td colspan="5">
	            				<textarea name="remarks" style="width: 100%;height: 100px;" id="remarks" class="form-control"></textarea>
	            			</td>
	            		</tr>
	            	</table>
	            	<br/>
	            	<div class="text-center">
	            		<shiro:hasPermission name="member_list:update">
	            		<button onclick="func_updateMember()" class="btn btn-primary" type="button">保存</button>
						</shiro:hasPermission>
	            	</div>
	            	</form>
	            </div>
	        </div>
	    </div>
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseTwo" class="" aria-expanded="true">
                    	RFM信息</a>
                </h4>
	        </div>
	        <div id="collapseTwo" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
	            <div class="panel-body">
					<table style="width: 100%;border-collapse:separate; border-spacing:0px 8px;">
	            		<tr>
	            			<td>最后下单时间</td>
	            			<td><input id="last_cost_time" readonly="readonly" class="form-control"> </td>
	            			<td>累计消费次数</td>
	            			<td><input id="cost_count" readonly="readonly" class="form-control"> </td>
	            			<td>购买总金额</td>
	            			<td><input id="cost_total" readonly="readonly" class="form-control"> </td>
	            		</tr>
	            		<tr>
	            			<td>购买商品件数</td>
	            			<td><input id="goods_total" readonly="readonly" class="form-control"> </td>
	            			<td>平均购买价格</td>
	            			<td><input id="average_cost" readonly="readonly" class="form-control"></td>
	            			<td>首次下单时间</td>
	            			<td><input id="first_cost_time" readonly="readonly" class="form-control"></td>
	            		</tr>
	            		<tr>
	            			<td>首次购买金额</td>
	            			<td><input id="first_cost" readonly="readonly" class="form-control"> </td>
	            			<td>最后一次购买金额</td>
	            			<td><input id="last_cost" readonly="readonly" class="form-control"></td>
	            			<td>平均购买件数</td>
	            			<td><input id="average_goods_quantity" readonly="readonly" class="form-control"></td>
	            		</tr>
	            		<tr>
	            			<td>最大单笔购买金额</td>
	            			<td><input id="max_cost" readonly="readonly" class="form-control"> </td>
	            			<td></td>
	            			<td></td>
	            			<td></td>
	            			<td></td>
	            		</tr>
	            	</table>
	            </div>
	        </div>
	    </div>
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseThree" class="collapsed" aria-expanded="false">
                    	会员标签</a>
                </h4>
	        </div>
	        <div id="collapseThree" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
	            <div class="panel-body">
	            	暂无
	            </div>
	        </div>
	    </div>
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapse4" class="collapsed" aria-expanded="false">
                    	会员自定义画像</a>
                </h4>
	        </div>
	        <div id="collapse4" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
	            <div class="panel-body">
	           		暂无
	            </div>
	        </div>
	    </div>
	</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript"  src="<%=path%>/js/system/province-city-area-data.js"></script>
<script type="text/javascript">

var path = "<%=path%>";
var memberId = getUrlParam("memberId");

$(function(){
	$(".memberId").val(memberId);
	$("#birthday").datetimepicker({startDate:"1900-01-01",language:"zh-CN",format:'yyyy-mm-dd',autoclose:true,minView:2});
// 	$("#birthday").datepicker({keyboardNavigation:!1,forceParse:!1,autoclose:!0});
	init();
});

function init(){
	$.post(path+"/member/ajaxGetMember",{id:memberId},function(data){
		if(data.status == "200"){
			var member = data.data;
			
			$("#phone").val(member.phone);
			$("#name").val(member.name);
			$("#wechat").val(member.wechat);
			
			$("#gender").val(member.gender);
			var birthday = member.birthday;
			$("#birthday").val(birthday);
// 			$("#birthday").datepicker({keyboardNavigation:!1,forceParse:!1,autoclose:!0,initialDate:birthday});
			$("#birthday").datetimepicker({keyboardNavigation:!1,forceParse:!1,autoclose:!0,initialDate:birthday});
			
			var age = "";
			if(birthday != null && birthday != ""){
				var now = new Date();
				var nowYear = now.getFullYear();
				var birthdayYear = birthday.split("-")[0];
				age = nowYear - parseInt(birthdayYear) + 1;
			}
			$("#age").val(age);
			$("#email").val(member.email);
			$("#QQ").val(member.qq);
			var province = member.province;
			var city = member.city;
			func_getProvince(province,city);
			
			$("#type").val(member.type);
			$("#weibo").val(member.weibo);
											  
			$("#crmMemberLevel").val(member.crmMemberLevel);
			$("#crmScore").val(isNaN(parseInt(member.crmScore))?0:parseInt(member.crmScore)/100);
			$("#crmBalance").val(isNaN(parseInt(member.crmBalance))?0:parseInt(member.crmBalance)/100);
			$("#storeName").val(member.storeName);
			$("#marketName").val(member.marketName);
			$("#status").val(member.status);
			$("#remarks").val(member.remarks);
			
			$("#cost_total").val(formatMoney(member.costTotal/100.0));
			$("#cost_count").val(member.costCount);
			$("#first_cost_time").val(member.firstCostTime==null?"":new Date(member.firstCostTime).Format("yyyy-MM-dd"));
			$("#last_cost_time").val(member.lastCostTime==null?"":new Date(member.lastCostTime).Format("yyyy-MM-dd"));
			$("#goods_total").val(member.goodsTotal);
			$("#average_cost").val(formatMoney(member.averageCost/100.0));
			$("#average_goods_quantity").val(member.averageGoodsQuantity);
			$("#max_cost").val(formatMoney(member.maxCost/100.0));
			$("#first_cost").val(formatMoney(member.firstCost/100.0));
			$("#last_cost").val(formatMoney(member.lastCost/100.0));
			$("#isPotential>option[value='"+member.isPotential+"']").attr("selected",true);
			$("#isFreezing>option[value='"+member.isFreezing+"']").attr("selected",true);
		}else if(data.status == "201"){
			alert("无记录");
		}else{
			alert("远程请求出错");
		}
	},"json");
}

function func_updateMember(){
	var phone = $.trim($("#phone").val());
	if ($.trim(phone) == "") {
        alert("手机号码不能为空");
        return;
    }
    if (!/^1[34578]\d{9}$/.test($.trim(phone))) {
        alert("手机号码不正确");
        return;
    }
    if (!/^[\u4E00-\u9FA5A-Za-z0-9]+$/.test($.trim($("#name").val()))) {
        alert("请填写正确的姓名");
        return;
    }
    if (!/^\d*$/.test($.trim($("#QQ").val()))) {
        alert("qq号码不正确");
        return;
    }
   /*  var date_ = $("#memberUpdateForm").serialize();
    province = $("#s_province option:selected").attr("data-code");
    city = $("#s_city option:selected").attr("data-code"); */
    $.post(path+"/member/ajaxUpdateMember",$("#memberUpdateForm").serialize(),function(data){
		if(data.status == "200"){
			alert("修改成功");
			parent.func_dataTableReload();
		}else if(data.status == "601"){
			alert("会员手机号重复");
		}else{
			alert("远程请求出错");
		}
    },"json");
	
	/*
	var phone = $.trim($("#phone").val());
	var name = $.trim($("#name").val());
	var wechat = $.trim($("#weixin").val());
	var gender = $.trim($("#sex").val());
	var birthday = $.trim($("#birthday").val());
	var email = $.trim($("#email").val());
	var QQ = $.trim($("#QQ").val());
	var province = $("#province>option:selected").text();
	var city = $("#city>option:selected").text();
	var weibo = $.trim($("#weibo").val());
	var crm_member_level = $.trim($("#crm_member_level").val());
	var type = $("#type").val();
	var status = $("#status").val();
	var remarks = $("#remarks").val();
	if(province == "请选择"){
		province = "";
	}
	if(city == "请选择"){
		city = "";
	}
	
	var jsonObject = {};
	jsonObject.id = memberId;
	jsonObject.phone = phone;
	jsonObject.name = name;
	jsonObject.wechat = wechat;
	jsonObject.gender = gender;
	jsonObject.birthday = birthday;
	jsonObject.email = email;
	jsonObject.QQ = QQ;
	jsonObject.province = province;
	jsonObject.city = city;
	jsonObject.weibo = weibo;
	jsonObject.crm_member_level = crm_member_level;
	jsonObject.type = type;
	jsonObject.status = status;
	jsonObject.remarks = remarks;
	
	if(phone == ""){
		alert("请填写手机号");
		return ;
	}
	
	$.ajax({
		contentType: 'text/plain;charset=utf-8',
		dataType: 'json',
    	type: 'POST',
    	url: path+"/member/ajaxUpdateMember",
    	data: JSON.stringify(jsonObject),
    	success: function(data){
    		if(data.status == "1"){
    			alert("保存成功");
    			parent.func_dataTableReload();
    		}else if(data.status == "2"){
    			alert("会员手机号请勿重复");
    		}else if(data.status == "0"){
    			alert("保存失败");
    		}
    	}
	},"json");
	*/
}

/**
 * 获取省份
 */
 function func_getProvince(provinceName,cityName){
				var provinceData = pcadata[100000];
				for(var o in provinceData){
					$("#s_province").append('<option value="'+o+'">'+provinceData[o]+'</option>');
				}
				if(provinceName != undefined){
					$("#s_province>option[value='"+provinceName+"']").attr("selected",true);
					
					func_getCity($("#s_province").val(),cityName);
				}
	}
	
 function func_getCity(code,cityName){
		$("#s_city").html('<option value="">请选择</option>');
				var cityData = pcadata[code];
				for(var o in cityData){
					$("#s_city").append('<option value="'+o+'">'+cityData[o]+'</option>');
				}
				if(cityName != undefined){
					$("#s_city>option[value='"+cityName+"']").attr("selected",true);
				}
	}
/* function func_getProvince(provinceName,cityName){
	$.post(path+"/member/ajaxGetAddress",{parentCode:'001'},function(data){
		if(data.status == '200'){
			var province = data.data;
			$.each(province,function(i,a){
				$("#province").append('<option value="'+a.code+'">'+a.name+'</option>');
// 				$("#province").append('<option value="'+a.name+'">'+a.name+'</option>');
			});
			if(provinceName != undefined){
// 				$("#province>option").each(function(i,d){
// 					if($(d).text() == provinceName){
// 						$(d).attr("selected",true);
// 						return false;
// 					}
// 				});
				$("#province>option[value='"+provinceName+"']").attr("selected",true);
				
				func_getCity($("#province").val(),cityName);
			}
		}
	},"json");
} */

 /* function func_getCity(code,cityName){
	$("#city").html('<option value="">请选择</option>');
	$.post(path+"/member/ajaxGetAddress",{parentCode:code},function(data){
		if(data.status == '200'){
			var city = data.data;
			$.each(city,function(i,a){
				$("#city").append('<option value="'+a.code+'">'+a.name+'</option>');
// 				$("#city").append('<option value="'+a.name+'">'+a.name+'</option>');
			});
			if(cityName != undefined){
// 				$("#city>option").each(function(i,d){
// 					if($(d).text() == cityName){
// 						$(d).attr("selected",true);
// 						return false;
// 					}
// 				});
				$("#city>option[value='"+cityName+"']").attr("selected",true);
			}
		}
	},"json");
} */ 

function getUrlParam(key){
	var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
}

function formatMoney(number, places, symbol, thousand, decimal) {
    number = number || 0;
    places = !isNaN(places = Math.abs(places)) ? places : 2;
    symbol = symbol !== undefined ? symbol : "￥";
    thousand = thousand || ",";
    decimal = decimal || ".";
    var negative = number < 0 ? "-" : "",
        i = parseInt(number = Math.abs(+number || 0).toFixed(places), 10) + "",
        j = (j = i.length) > 3 ? j % 3 : 0;
    return symbol + negative + (j ? i.substr(0, j) + thousand : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousand) + (places ? decimal + Math.abs(number - i).toFixed(places).slice(2) : "");
}
Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
</script>
</html>